由於 7 月份發出第四版正式版本，手邊剛起步的專案決定進行版本升級，以下記錄當時整個升版過程。

在第四版正式發出後，閱讀了官方的遷移說明文件，主要與第三版不同之處在於：

1. 提供新版本的 Style Mode，過去採用 SASS 的外部 repo： primevue-sass-theme，該 repo 用來編譯 theme.css，第三版的各主題色 theme.css 放置於 node_modules > primevue > resources > themes；第四版則移除 SASS 編譯，根據 Style Mode 的新架構設計，須額外安裝 @primevue > themes 以載入主題使用；其主題色的套用方法及深色魔式的切換也隨之調整。
2. 第三版前採用 PrimeFlex 作為 PrimeVue 使用的 CSS 通用類別庫，而在第四版時遷移至 tailwindCSS，因此，官方提供額外遷移工具，協助開發者將 PrimeFlex 樣式轉換為 tailwindCSS。
3. 部分元件名稱更名為較常見的名稱，比如：原先的 Dropdown 改為 Select 選單名稱；Popover 取代 OverlayPanel。
4. 部分移除的元件其方法改採用其他元件整合或取代，比如：原先的 TabMenu 元件整併進 Tabs 中。
5. 部分樣式移除可採用元件的屬性取代，比如：移除 .p-fluid，新增 fluid 屬性使元件加上後其寬度可自適應延伸到其父層的寬度。
6. 部分元件或樣式移除；或針對特定元件的優化。

大致掌握升版的變換後，就準備來進行專案的版本升級：

1. 解除原本的第三版 PrimeVue，重新 npm install primevue，預設安裝第四版。

   • 啟動專案 npm run dev，會發現已經棄用的元件或是功能需要更改路徑。

2. 移除 index.html 載入的 theme.css
   

3. 安裝主題套件：npm install @primevue/themes，取代原先資料夾 primevue/resources 內的 css。

   • 此步驟安裝及設定可參考 PrimeVue 安裝及 Style Mode。

4. 安裝 tailwindCSS

   1. 在 vite 上的安裝：執行 npm install -D tailwindcss postcss autoprefixer 及 npx tailwindcss init 。
   2. 在 npx tailwindcss init 執行後會自動產生 tailwind.config.js ，此時須手動新增 postcss.config.js。
   3. 調整 tailwind.config.js：將副檔名為 .vue 的檔案也納入編譯的範圍內。

5. tailwindCSS 整合進 PrimeVue

   • 此步驟安裝及設定可參考 tailwindCSS Integration。

6. 調整 main.js 內載入元件，針對第四版的元件移除及新增。

   • 或可採用 Auto Import：此步驟安裝及設定可參考 Auto Import。

7. 使用 PrimeCLT：將 PrimeFlex 的 CSS 樣式轉換為 tailwindCSS 的樣式。

   1. 在終端機下安裝：npm install -g primeclt
   2. 執行 prime pf2tw ：進行樣式轉換，比如 primeFlex 的 mb-3 轉換為 tailwindCSS 的 mb-4 (16px)

8. 做到此部分就可以移除 PrimeFlex 了：npm uninstall PrimeFlex

在環境上的設定大概如上所述，下一篇再說明樣式上的設定調整~

參考連結：https://primevue.org/guides/migration/v4/